ingrese la descripción de la imagen aquí drag.php

Tengo una matriz barajada con palabras barajadas y cuando trato de configurar el contenido de texto del cuadro en la palabra, muestra esto

 <script> var firstContainer = document.getElementById('pickzone'); var sentense =<?php echo "'$array'" ?>; //getting string of sentense var arrOfWords = sentense.split(" ") // spliting it into array of strings(words) var dropZones = document.getElementsByClassName('zone'); var shuffled = arrOfWords.sort(() => Math.random() - 0.5)// shuffling array of words in random order for (let i = 0; i < arrOfWords.length; i++) { let box = document.createElement('span'); arrOfWords[i] = box; box.setAttribute('class', 'box'); box.setAttribute('draggable', 'true') box.textContent = shuffled[i] // this is the problematic part I guess box.addEventListener('dragstart', (event) => { dragBox = event.target; }) firstContainer.appendChild(box); } </script>